<template>
	<view class="page-content">
		<view class="cu-form-group justify-between">
			<view class="" @tap="cancal()">取消</view>
			<view class="text-title">{{title}}</view>
			<view :style="{color: themeColor}" @tap="submit()">确认</view>
		</view> 
        <view class="flex justify-center align-center" style="width: 100%;height: 80rpx;">
            <view  style="border-bottom: 1px solid #157EFF;"  class="search_  flex justify-between align-center">
                <input style="width:100%" type="text" v-model="seach_line" placeholder="搜索" />
                <view class="seach_icon " @click="search">
                    <text style="font-size: 40rpx;" class="cuIcon-search text-blue"></text>
                </view>
            </view>
        </view>
		<scroll-view scroll-y     style="height: 500rpx;max-height: 500rpx;">
			<template v-if="checkedList.length">
				<block v-for="(item, index) in checkedList" :key="index">
					<view class="cu-form-group justify-between" @tap="changeCheck(item)">
						<view style="font-size: 24rpx;color: #444444;" class="my-items-title">{{item[showParam]}}</view>
						<template v-if="item.isCheck">
							<view class="iconfont icon-duihao" :style="{color: themeColor}"></view>
						</template>
					</view>
				</block>
			</template>
			<template v-else>
				<view class="text-center">暂无数据～</view>
			</template>
		</scroll-view>
		<slot></slot>
	</view>
</template>

<script>
	Object.clone = (obj, func = false) => {
		if (!obj || !(obj instanceof Object) || (typeof obj == "function")) {
			if (typeof obj == "function" && func) {
				return null;
			}
			return obj;
		}
		var constructor = obj.constructor;
		var result = new constructor();
		for (var key in obj) {
			if (obj.hasOwnProperty(key)) {
				result[key] = Object.clone(obj[key]);
			}
		}
		return result;
	};
	/**********
	 * @author fjj
	 * @list 需要选择的列表数据，如果没有传空数组
	 * @showParam 显示字段
	 * @defaultValue 默认选中数据，数据对象格式
	 * @title 标题名称
	 * @isMultiple 是否多选，默认多选
	 * @cancel 方法 点击取消时触发
	 * @change 方法 点击确定时触发 返回selectedList数据
	 * ********/
	export default {
		props: {
			list: {
				require: true,
				type: Array,
				default () {
					return [];
				},
			},
            iscanls:{
                type:Boolean
            },
			isMultiple: {
				require: false,
				type: Boolean,
				default: true,
			},
			showParam: {
				require: true,
				type: String,
				default: 'name',
			},
			defaultValue: {
				require: false,
				type: Array,
				default () {
					return [];
				},
			},
			title: {
				require: false,
				type: String,
			},
		},
		watch: {
			list(arr) {
				this.checkedList = Object.clone(arr);
				this.resetDefaultValueFun();
			},
		},
		computed: {
            
		},
		data() {
			return {
				checkedList: [],
                oldlist:[],
                seach_line:"",
				themeColor: this.$ThemeColor || '#1890FF',
			};
		},
		mounted() {
			this.checkedList = Object.clone(this.list);
            if(this.iscanls === true){
                console.log("我进来了")
                this.checkedList =  this.checkedList.map(res=>{
                    if(res.isCheck === true){
                       let obj = {
                           id:res.id,
                           linename: res.linename,
                           status: res.status,
                           creationTime:res.creationTime,
                           name:res.name
                       }
                       return obj
                    }
                    return res
                })
            }
            
            // console.log(this.checkedList)
            this.oldlist = this.list
			this.resetDefaultValueFun();
		},
		methods: {
            // 点了搜索
            search(){
              let search_list = this.oldlist.filter(res=>{
                  let indexof = res.linename.indexOf(this.seach_line)
                  return indexof != -1
              })
              this.list = search_list 
              console.log(this.seach_line)
            },
			resetDefaultValueFun() {
				if (this.defaultValue.length) {
					this.defaultValue.map(arrParam => {
						for (let i = 0; i < this.checkedList.length; i++) {
							if (arrParam === this.checkedList[i][this.showParam]) {
								this.checkedList[i].isCheck = true;
								return;
							}
						}
					});
				}
			},
			resetCheckedList() {
				this.checkedList = Object.clone(this.list);
				this.resetDefaultValueFun();
			},
			cancal() {
				this.resetCheckedList();
				this.$emit("cancel");
			},
			submit() {
                let arr = this.checkedList.filter(res=>{
                    return res.isCheck === true;
                })
                if(arr.length == 0){
                    this.$emit("change","我没选")
                    this.$forceUpdate();
                    return
                }
                    this.$emit("change", {
                    	selectedList: this.checkedList.filter((item) => {
                    		return item.isCheck === true;
                    	}),
                    })
			},
			changeCheck(item) {
				if (!this.isMultiple) {
					this.checkedList.map((item) => {
						return item.isCheck = false;
					})
				}
				item.isCheck = item.isCheck ? false : true;
				this.$forceUpdate();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		background: #FFFFFF;
		padding: 0;
		.text-title {
			color: $uni-text-color;
		}
        .search_{
            width: 60%;
            padding: 10rpx;
        }
		.text-theme {
			//设定自己的主题色
		}

		.cu-form-group {
			font-size: 30rpx;
			color: $uni-text-color;
			background-color: #ffffff;
			padding: 1rpx 30rpx;
			display: flex;
			-webkit-box-align: center;
			align-items: center;
			min-height: 100rpx;
		}

		.justify-between {
			-webkit-box-pack: justify;
			justify-content: space-between;
		}

		.text-center {
			text-align: center;
		}
	}

	//勾选符号
	@font-face {
		font-family: "iconfont";
		src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKMAAsAAAAABjQAAAJCAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApAXAE2AiQDCAsGAAQgBYRtBzAbggXIHpIkRaoQRWE8BAUAhAg+9vv9nmuIa1TNKpEhUQKVBCVQOoRK8vy1hHc1bfdP6w7cjv8uKbWo1L2kX+ayoTeP0Yzv40HyjuJQSNJSa9Mn7p3+CfRBRj2g3PaksSZN6gLq4kAKcC+MukhKKOOGsQtcwn0ClXplpHZGp5dZrYy1LBB3jqWx2lxYJmO5cqGo2ZuJJ7ny5CF5wzyG34//SlFLIk9ZDfu3Iybr/1VlF6T3pWPXPiFCQIdzpJjGZMRxbXpXhWBchcp0pUFsX7XBr6pSyXeJvdoF++us6mrQDRX3pHSXCpDAbY1Vi45RbyVqr+4+Vv41lNf8mPUeld/ee48O4td8LZrlbRstDQ91t8/t+uHP0te0gaUQLDR1zCstK//lVRn4WRjsDm2Zfl6mfA+e4E8oe/ZkutpyJpmqrB1M1J6hqVIlSrC/0ddYS8tp86FcywhvmZ4UqXLDZMZOI1dlBoVy66g0ZexwlSZShcgqMOkCINS7l+/T9AKRqvdOZuwncq3+UKiPClQ6jaYzq4yGU78tUSM0Qd8BxxAhd9xUH9UuopX4msyqQ34VZezEoJgrFHNjGKKcY0O8aZWIOHApAhgFj6HvC4ikcNGgnE0UdebzvO5FOUMErN42CWkIMgHdDuAwCCHuDyf1pc8vQpaETyNbumqyq5AUcyYHRTmFHuSYIezVdS/PxDZZSgjhACcJATAKZiGfTwBR/SwXMpAce0Qy0ilv9+N9Dbn1TcHXHYFKljUJe1qquEkcWxOMAQ==') format('woff2');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-duihao:before {
		content: "\e60b";
	}
</style>
